import React from 'react'
import {
    message,
    Modal
} from 'antd'
import Table from '../../components/Table'
import {FormModal} from '../../components/ModalForm'
import 'whatwg-fetch'
import API from '../../axios/api'
import {UserType} from "../../utils/system-data";
import SearchBar from "../../components/SearchBar";
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();
const confirm = Modal.confirm

let columns = [
    { dataIndex: 'RedeemCode', title: '兑换码', width: 100 },
    { dataIndex: 'IsUsed', title: '是否使用', width: 100,render: (text, record) => (text == 1 ? '是':'否')},
    { dataIndex: 'ExchangeNickName', title: '兑换人名称', width: 200,},
    { dataIndex: 'StartTimeString', title: '兑换有效期开始时间', width: 200,},
    { dataIndex: 'EndTimeString', title: '兑换有效期结束时间', width: 200,},
    { dataIndex: 'ValidityDays', title: '有效时间', width: 100,},
]

@withRouter @inject('appStore') @observer
class User extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList,defaultrudderId,defaultrudderName} = props.appStore
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            Page: 1,
            Pages:1,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName
        }
    }

    
    componentWillReceiveProps(nextProps){
        const {user, rudder, rudderList,defaultrudderId,defaultrudderName} = this.props.appStore
         this.setState({
             user: user,
             rudder: rudder,
             rudderList: rudderList,
             RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName
         })
     }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
        }
        await API.RedeemCodeapi(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }


    add = () =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        debugger
        API.editRole(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    onOkEdit = (param) =>{
        this.setState({
            modalShowEdit: false
        })
        message.success('编辑成功')
    }

    onCancelEdit = () =>{
        this.setState({
            modalShowEdit: false
        })
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'edit') {
            this.setState({
                item: item,
                modalShowEdit: true
            })
        } else if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    this.handerDel(item, 0).then(res => {
                        if(res.Code === 200) message.success('删除成功')
                        else message.error(res.Message)
                    })
                    this.fetchTableData()
                },
                onCancel() {}
            })
        }
    }

    handerDel(item, status){
        return API.delRole({Id: item.Id, Status: status})
    }

    fields = () => {
        return [
            { label: '班级名称', type: 'input', name: 'HallName',
                options: {
                    rules: [
                        { required: true, message: '班级名称必填!',}
                    ]
                }
            },
            { label: '班级级别', type: 'input', name: 'HallGrade'},
            { label: '班级描述', type: 'input', name: 'HallDescribe'},
            { label: '班级地址', type: 'input', name: 'Address'},
            { label: '班级头像', type: 'input', name: 'Address'},
            { label: '地址纬度', type: 'input', name: 'Longitude'},
            { label: '地址经度', type: 'input', name: 'Latitude'}, ]
    }

    onSearch = (searchFields) => {
        if(searchFields.RudderId){
            this.setState({
                RudderId:searchFields.RudderId
            })
        }

        this.setState({
            Page: 1
        },()=>{
            this.fetchTableData(searchFields)
        })
        
    }

    searchFields = () => {
        return [{
            title: '分舵名称',
            key: 'RudderId',
            type: 'select',
            defaultValue: this.state.defaultrudderName,
            items: () => this.state.rudderList,

        }, ]
    }

    render() {
        return (
            <div id="wrap">
                {
                      /*
                    this.state.user && this.state.user.UserRankType === UserType.ADMIN || this.state.user.RudderId == "-" ?
                        (<SearchBar
                            onSubmit={this.onSearch}
                            fields={this.searchFields()}
                        />): ''
                        
                        */
                }
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
                <FormModal
                    modalKey="add"
                    visible={this.state.modalShow}
                    title="添加"
                    fields={this.fields()}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    okText="保存"
                />
            </div>
        )
    }
}
export default User
